全てのチェックボックスのON / OFFを切り替える
今回は、複数のチェックボックスを一度にON / OFFするボタンを作成する方法を紹介します。チェックボックスをJavaScriptで操作する1つの手段として覚えておくとよいでしょう。応用次第ではユニークな機能も作成できると思うので、各自で研究してみてください。

→ チェックボックスとボタンをFORMで作成する
 
まずは、FORMタグを使ってチェックボックスとボタンを作成します。この手順に特に変わった点はありませんが、チェックボックスにname属性で名前を付けておくのを忘れないでください。今回の例では、チェックボックスに"c1"という名前を付けました。なお、ボタンでON / OFFを切り替えるチェックボックスは、全て同じ名前を付けておく必要があります。
<FORM name="f1">
<INPUT type=checkbox name="c1">赤<BR>
<INPUT type=checkbox name="c1">青<BR>
<INPUT type=checkbox name="c1">緑<BR>
<INPUT type=checkbox name="c1">黄色<BR>
<INPUT type=checkbox name="c1">白<BR>
<INPUT type=checkbox name="c1">黒<BR>
<BR>
<INPUT type=button value="全てOn">
<INPUT type=button value="全てOff">
</FORM>


→ onClickイベントでJavaScript関数を呼び出す
 
次に、ボタンをクリックした際にJavaScript関数が呼び出されるようにonClickイベントを追加します。「全てOn」ボタンがクリックされた場合は、チェックボックスをONにする関数「all_on()」を呼び出します。同様に、「全てOff」ボタンをクリックした場合は、チェックボックスをOFFにする関数「all_off()」を呼び出します。このとき、それぞれの関数の引数には、チェックボックスのオブジェクト名を指定します。今回の例では、「this.form.c1」が引数となります。
<FORM>
<INPUT type=checkbox name="c1">赤<BR>
<INPUT type=checkbox name="c1">青<BR>
<INPUT type=checkbox name="c1">緑<BR>
<INPUT type=checkbox name="c1">黄色<BR>
<INPUT type=checkbox name="c1">白<BR>
<INPUT type=checkbox name="c1">黒<BR>
<BR>
<INPUT type=button value="全てOn" onClick="all_on(this.form.c1)">
<INPUT type=button value="全てOff" onClick="all_off(this.form.c1)">
</FORM>


→ チェックボックスをON / OFFするJavaScript関数を作成する
 
あとは、2つのJavaScript関数を作成すればページが完成します。それぞれの関数では、for文を利用し、チェックボックスの数だけONまたはOFFに変更する作業を繰り返します。チェックボックスの数は、「（チェックボックスのオブジェクト名）.length」で検出できます。また、（チェックボックスのオブジェクト名）は引数として関数に受け渡されるため、引数を変えて関数を呼び出せば、関数をそのつど作成しなくても複数のチェックボックス群に対応できます。
<SCRIPT language="JavaScript">
<!--
function all_on(chk){
for (i = 0; i < chk.length; i++) {
chk[i].checked = true;
}
}
function all_off(chk){
for (i = 0; i < chk.length; i++) {
chk[i].checked = false;
}
}
// -->
</SCRIPT>


PC�p�����y�����l���g�����������}�W�������������z �����������O�~�y�������������z Yahoo �y�V NTT-X Store

�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� ���������[�� �C�O���s�����������I �C�O�z�e��